<template>
  <el-dialog
    v-bind="$attrs"
    v-model="visible"
    :width="dialogWidth"
    :fullscreen="isFullscreen"
    :append-to-body="appendToBody"
    @open="emit('open')"
    @opened="emit('opened')"
    @close="emit('close')"
    @closed="emit('closed')"
    @open-auto-focus="emit('openAutoFocus')"
    @close-auto-focus="emit('openAutoFocus')"
  >
    <template #header>
      <slot name="header" />
    </template>
    <slot />

    <template #footer>
      <slot name="footer">
        <span
          v-if="showCancelButton || showConfirmButton"
          class="dialog-footer"
        >
          <el-button
            v-show="showCancelButton"
            @click="emit('cancel')"
          >
            {{ cancelButtonText }}
          </el-button>
          <el-button
            v-show="showConfirmButton"
            type="primary"
            @click="emit('confirm')"
          >
            {{ confirmButtonText }}
          </el-button>
        </span>
      </slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  computed, ref, watch,
} from 'vue';

const props = defineProps({
  modelValue: Boolean,
  size: {
    type: String,
    default: 'default',
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  appendToBody: {
    type: Boolean,
    default: true,
  },
  cancelButtonText: {
    type: String,
    default: '取消',
  },
  confirmButtonText: {
    type: String,
    default: '确认',
  },
});
const emit = defineEmits({
  'update:modelValue': (value: boolean) => value === true,
  open: () => true,
  opened: () => true,
  close: () => true,
  closed: () => true,
  openAutoFocus: () => true,
  closeAutoFocus: () => true,
  cancel: () => true,
  confirm: () => () => true,
});
const dialogWidth = ref('600px');
const isFullscreen = ref(false);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val === true);
  },
});

watch(
  () => props.size,
  (newValue) => {
    if (newValue) {
      if (newValue === 'small') {
        dialogWidth.value = '465px';
        isFullscreen.value = false;
      }
      if (newValue === 'default') {
        dialogWidth.value = '600px';
        isFullscreen.value = false;
      }
      if (newValue === 'large') {
        dialogWidth.value = '960px';
        isFullscreen.value = false;
      }
      if (newValue === 'full') {
        isFullscreen.value = true;
      }
    }
  },
  {
    immediate: true,
  }
);
</script>
